<div class="content-section introduction">
    <div>
        <span class="feature-title">FullCalendar</span>
        <span>An event calendar based on the FullCalendar library.</span>
    </div>
</div>

<div class="content-section implementation">
    <p-fullCalendar [events]="events" [options]="options"></p-fullCalendar>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;FullCalendarModule&#125; from 'primeng/fullcalendar';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>FullCalendar is a wrapper around on <a href="https://fullcalendar.io/docs/v4">FullCalendar 4.0.0.alpha.2+</a> so fullcalendar needs to be included in your project. For a complete documentation and samples please refer to the fullcalendar website.
<pre>
<code class="language-markup" pCode ngNonBindable>
npm install fullcalendar@4.0.0-alpha.2 --save
</code>
</pre>
            
            <p>Events should be an array and defined using the events property.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fullCalendar [events]="events"&gt;&lt;/p-fullCalendar&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;

    events: any[];

    ngOnInit() &#123;
        this.events = [
            &#123;
                "title": "All Day Event",
                "start": "2016-01-01"
            &#125;,
            &#123;
                "title": "Long Event",
                "start": "2016-01-07",
                "end": "2016-01-10"
            &#125;,
            &#123;
                "title": "Repeating Event",
                "start": "2016-01-09T16:00:00"
            &#125;,
            &#123;
                "title": "Repeating Event",
                "start": "2016-01-16T16:00:00"
            &#125;,
            &#123;
                "title": "Conference",
                "start": "2016-01-11",
                "end": "2016-01-13"
            &#125;
        ];
    &#125;
    
&#125;
</code>
</pre>
            <p>In a real application, it is likely to populate the events by making a service call, when the events are updated, the component will detect the change and render them.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
@Injectable()
export class EventService &#123;
    
    constructor(private http: Http) &#123;&#125;

    getEvents() &#123;
        return this.http.get('showcase/resources/data/calendarevents.json')
                    .toPromise()
                    .then(res =&gt; &lt;any[]&gt; res.json().data)
                    .then(data =&gt; &#123; return data; &#125;);
    &#125;
&#125;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class MyModel &#123;

    events: any[];

    ngOnInit() &#123;
        this.eventService.getEvents().then(events => &#123;this.events = events;&#125;);
    &#125;
    
&#125;
</code>
</pre>

            <h3>Options</h3>
            <p>FullCalendar has a long list of customization parameters that are defined with the options property. Example below customizes the header property.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class FullCalendarDemo implements OnInit &#123;

    events: any[];

    options: any;
            
    constructor(private eventService: EventService) &#123; &#125;

    ngOnInit() &#123;
        this.eventService.getEvents().then(events => &#123;this.events = events;&#125;);
        
        this.options = &#123;
            defaultDate: '2017-02-01',
            header: &#123;
                left: 'prev,next',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            &#125;
        &#123;;
    &#125;

&#125;
</code>
</pre>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fullCalendar [events]="events" [options]="options"&gt;&lt;/p-fullCalendar&gt;
</code>
</pre>

            <h3>Change Detection</h3>
            <p>Updates to the events or options are reflected to the UI whenever a change occurs. An important note here is that UI update only happens whenever a new instance is created
                on these twp properties. Simply changing the events array without creating a new instance of the array or updating a property inside options will have no effect.
            </p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
update() &#123;
    //incorrect
    this.events.push(&#123;
        "title": "Conference",
        "start": "2016-01-11",
        "end": "2016-01-13"
    &#125;);

    //correct
    this.events = [...this.events, &#123;
        "title": "Conference",
        "start": "2016-01-11",
        "end": "2016-01-13"
    &#125;];

    //incorrect
    this.options.weekends = false;

    //correct
    this.options = &#123;...this.options, &#123;weekends: false&#125;&#125;;
&#125;
</code>
</pre>

            <h3>Events</h3>
            <p>Events of the FullCalendar are also defined with the options property.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
this.options = &#123;
    header: &#123;
        left: 'prev,next',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    &#125;,
    dateClick: (e) =>  &#123;
        //handle date click
    &#125;
&#123;;
</code>
</pre>

            <h3>Methods</h3>
            <p>Methods of the underlying calendar instance is accessible using the reference of the components getCalendar() API.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fullCalendar #fc [events]="events" [options]="options"&gt;&lt;/p-fullCalendar&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
@ViewChild('fc') fc: FullCalendar;

gotoDate(date: Date) &#123;
    this.fc.getCalendar().gotoDate(date);
&#125;
</code>
</pre>
            
            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>events</td>
                            <td>array</td>
                            <td>An array of events to display.</td>
                        </tr>
                        <tr>
                            <td>options</td>
                            <td>Object</td>
                            <td>A configuration object to define properties of FullCalendar.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
                        
            <h3>Dependencies</h3>
            <p><a href="https://fullcalendar.io/docs/v4">FullCalendar</a>.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/fullcalendar" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-fullCalendar [events]="events" [options]="options"&gt;&lt;/p-fullCalendar&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
export class FullCalendarDemo implements OnInit &#123;

    events: any[];

    options: any;
            
    constructor(private eventService: EventService) &#123; &#125;

    ngOnInit() &#123;
        this.eventService.getEvents().then(events => &#123;this.events = events;&#125;);
        
        this.options = &#123;
            defaultDate: '2017-02-01',
            header: &#123;
                left: 'prev,next',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            &#125;,
            editable: true
        &#125;;
    &#125;

&#125;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
@Injectable()
export class EventService &#123;
    
    constructor(private http: Http) &#123;&#125;

    getEvents() &#123;
        return this.http.get('showcase/resources/data/calendarevents.json')
                    .toPromise()
                    .then(res =&gt; &lt;any[]&gt; res.json().data)
                    .then(data =&gt; &#123; return data; &#125;);
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>
